<template>
	<div class="channelStatistics">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 游戏内分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="选择日期：" :label-width="formLabelWidth">
						<el-date-picker
						v-model="ruleForm.startDate"
						align="left"
						type="daterange"
						placeholder="请选择日期"
						@change='dateChange' 
						:picker-options="pickerOptions0">
						</el-date-picker>
					</el-form-item>
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="right_content">
			<div class="channelStatisticsTable"  style='margin-bottom:40px;'>
				<div class="channelStatisticsTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						新增角色
						<el-button type="primary" size="mini" class="excel"  @click.stop="excel('1','游戏内分析-国家分析-新增角色')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>
					</span>
				</div>
				<div class="channelStatisticsTableBody fadeIn animated">
                    <template>
                    <el-table
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        :data="tableData"
                        border
                        >
                        <el-table-column 
                            align="center"
                            v-for="(col,key) in tableHead"
                            :prop="col.prop" 
                            :label="col.label" 
                            :key="col.prop" 
                        >
                        </el-table-column>
                    </el-table>
                    </template>							
					<div class="pages channelStatisticsPage">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="pageSizes"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./countryAnalysis.styl"></style>
<script src="./countryAnalysis.js"></script>
